<div tabindex="-1" (keydown)="onKeyup($event)" class="file-container">
    <div *ngIf="!isLoading;else elseLoadingTemplate">
        <ul class="files" *ngIf="files && files.length > 0;else elseNoFilesTemplate">
            <div *ngFor="let file of files; let i=index" id="_local_file_{{i}}" [tabindex]="i" title="{{file.fileName}}" 
            class="file" [class.focus]="file===currentFocusItem" (focus)="onFileOrDirectoryFocus(file)" (dblclick)="openFileOrDirectory(file)">
              <div class='icon'>
                <img src="{{'./assets/files/'+file.extIcon+'.png'}}" onerror ="this.src='./assets/files/common.png'" width="54" height="54">
              </div>
              <div class="name">{{file.fileName.length>25?file.fileName.substr(0,25)+'..':file.fileName}}</div>
            </div>
        </ul>
        <ng-template #elseNoFilesTemplate>
            <div class="error">
              <div *ngIf="!exception; else elseFileExceptionTemplate">
                  {{currentDirecory}} 不存在目录或文件
              </div>
              <ng-template #elseFileExceptionTemplate>
                  <div class="errorText">
                      {{exception}}
                  </div>
              </ng-template>
          </div>
        </ng-template>
    </div>
    <ng-template #elseLoadingTemplate>
        <div style="width:100%;height: 60%; display:flex;justify-content:center;align-items:center;">
          <div class="loadingImage">&nbsp;</div>
        </div>
    </ng-template>
</div>